<template>
  <div>
    <h2>添加</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>价格</td>
          <td><input type="text" v-model="state.Price"/></td>
        </tr>
        <tr>
          <td>照片</td>
          <td><input type="file" @change="getimg"/>
            <img :src="state.Imgs" width="100" height="100">
          </td>
        </tr>
        <tr>
          <td>是否有窗户</td>
          <td>
            <input type="radio" name="win" value="1" v-model="state.Windew"/>有
            <input type="radio" name="win" value="0" v-model="state.Windew"/>无
          </td>
        </tr>
        <tr>
          <td>是否有早餐</td>
          <td>
            <input type="radio" name="Breakfast" value="1" v-model="state.Breakfast"/>有
            <input type="radio" name="Breakfast" value="0" v-model="state.Breakfast"/>无
          </td>
        </tr>
        <tr>
          <td>时间</td>
          <td><input type="date" v-model="state.CreateTime"/></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="button" value="增加" @click="ok" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

let data: any = reactive({
  state: {
    price:'',
    Imgs:'',
    Windew:1,
    Breakfast:1,
    CreateTime:''
  }
});

let {state}=toRefs(data);

const getimg=(e:any)=>{
let f=new FormData();
let obj=e.target.files[0];
f.append('file',obj)

axios({
  url:'/api/one',
  method:'post',
  data:f
}).then((res)=>{
  if(res.data.code==1){
      alert(res.data.msg)
      return;
  }
  if(res.data.code==2){
    alert(res.data.msg)
    return;
  }
 state.value.Imgs="https://localhost:7272"+res.data.data

}).catch((err)=>{
  console.log(err)
})
}

const ok = () => {

  let obj={
    price:state.value.Price,
    Imgs:state.value.Imgs,
    Windew:state.value.Windew,
    Breakfast:state.value.Breakfast,
    CreateTime:state.value.CreateTime,
  }

  axios({
      url:'/api/one/add',
      method:'post',
      data:obj
  }).then((res)=>{
    console.log(res)
    if(res.data.data>0){
      alert('成功');
      return;
    }
    else
    {
      alert('失败');
      return;
    }
  }).catch((err)=>{
    console.log(err)
  })
};
</script>

<style scoped></style>
